<template>
	<view class="content">
		<view class="custom-navbar">
			<uni-icons @click="fanhui()" class="leftIcons" size="22" type="left"></uni-icons>
			<view class="navbar-title">
				{{navTitle}}
			</view>
		</view>
		<view v-if="!flag">
			<view class="textBox" v-for="(item, index) in dataList" :key="index" @click="goArticleDetail(item)">
				<image :src="item.cover" mode=""></image>
				<view class="leftContent">
					<p class="text-title">
						{{ item.title }} 
					</p>
					<view class="desc">{{item.briefIntroduction?item.briefIntroduction:''}}</view>
					<text class="text-tag" v-if="item.typeName">
						{{ item.typeName }}
					</text>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="textBox" v-for="(item, index) in dataList" :key="index" @click="goPosterDetail(item)">
				<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/homeLogo.png" mode="aspectFit"></image>
				<view class="leftContent">
					<p class="text-title">
						{{ item.name }} 
					</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getArticleList
	} from '@/api/extension.js';
	import {
		frontExtendArticleId
	} from '@/api/user.js';
	export default {
		data() {
			return {
				navTitle: "文章列表",
				type: null,
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页的数据量
				dataList: [],
				flag: ''
			}
		},
		onLoad(option) {
			if (option.type) {
				this.navTitle = option.name
				this.type = option.type
			}
			this.flag = option.flag
			this.getList();
		},
		methods: {
			getList() {
				const data = {
					storeId: 0,
					type: this.type
				};
				if (this.flag) {
					frontExtendArticleId().then(res => {
						this.dataList = res.data
						console.log(this.dataList);
					})
					uni.setNavigationBarTitle({
						title:'海报类型'
					})
				} else {
					uni.setNavigationBarTitle({
						title:'文章列表'
					})
					getArticleList(this.pageNum, this.pageSize, data)
						.then(res => {
							if (res.data && res.data.records) {
								this.dataList = [...this.dataList, ...res.data.records];
								this.pageNum += 1; // 加载完后页数加1
								console.log(this.dataList, "this.dataList")
							}
						})
				}

			},
			goArticleDetail(item) {
				uni.navigateTo({
					url: "/pages/platform/article/index?id=" + item.id
				});

			},
			goPosterDetail(item) {
				uni.navigateTo({
					url: "/pages/user_spread_code/index?id=" + item.id
				});
			
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		// 监听页面触底事件
		onReachBottom() {
			this.getList(); // 触底加载下一页
		},
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.custom-navbar {
		height: 180rpx;
		background-color: #fff;
		padding-top: 110rpx;

		.leftIcons {
			float: left;
			margin-left: 20rpx;
		}

		.navbar-title {
			margin-left: 42%;
		}
	}

	.content {
		min-height: 100vh;
		background-color: $uni-bg-color-grey;
	}

	.textBox {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 24rpx;
		margin: 22rpx 32rpx;
		display: flex;

		.leftContent {
			width: 70%;
		}

		.text-title {
			padding: 0rpx 0 0 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.desc {
			padding: 20rpx 0 0rpx 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #9E9E9E;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.text-tag {
			background: rgba(35, 147, 255, 0.2392);
			border-radius: 8rpx;
			padding: 8rpx 10rpx;
			width: 96px;
			height: 24px;
			font-size: 24rpx;
			color: #2393FF;
			margin-left: 20rpx;
		}

		image {
			width: 236rpx;
			height: 206rpx;
			border-radius: 10rpx;
		}
	}
</style>